<template>
  <div class="home">
    <div class="banner">
      <!-- 轮播图组件 -->
      <!-- <Banner /> -->
      <Swiperbanner />
      <!--搜索框内容  -->
      <div class="search">
        <div :class="{ bg: isShow }">
          <el-row>
            <el-col :span="8" :offset="8">
              <!-- 搜索框--获取用户输入的内容通过v-monde --获取聚焦事件@focus-->
              <div class="input_bg">
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  @focus="getinput"
                  @blur="laveInpit"
                ></el-input>
              </div>

              <!-- 搜索内容区域 --热门城市-->
              <div class="list" v-show="isShow">
                <p class="info">
                  微信推送:可以直接输入城市的中文,英文来匹配检索
                </p>
                <div class="title">热门城市</div>
                <div class="hot_citys">
                  <a href="##" v-for="item in hotcity" :key="item.id">{{
                    item.name
                  }}</a>
                </div>
              </div>
              <!-- 搜索列表内容展示 -->
              <ul class="search_list" v-show="isShowList">
                <li v-for="item in searchList" :key="item.id">
                  {{ item.name }}
                  <span class="subname">{{ item.en_name }}</span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- -----两个图片----------------------------------- -->
    <div class="section section-gray">
      <div class="wrapper">
        <ul>
          <li>
            <img src="@/assets/left.jpg" width="740px" alt="" />
          </li>
          <li>
            <img src="@/assets/right.jpg" width="400px" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <!-- -----今日推荐----------------------------------- -->
    <div class="section">
      <div class="wrapper">
        <div class="title-th">
          <a href="##" class="notice"><span>出境游安全提示</span></a
          >今日推荐
        </div>
        <div class="content">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in todyInfo" :key="index">
              <div class="item">
                <img :src="item.data.pic" width="275px" height="185px" alt="" />
                <div class="info">
                  <div class="subtitle">{{ item.data.subject }}</div>
                  <div class="bottom">
                    <template v-if="item.type == 'video'">
                      <span class="fr">{{ item.data.tag }}</span>
                      <span class="f14">{{ item.data.desc }}</span>
                    </template>
                    <template v-else-if="item.type == 'bbs'">
                      <span class="fr">{{ item.data.views }}人浏览过</span>
                      <span class="f14">{{ item.data.username }}</span>
                    </template>
                    <template v-else>
                      <!-- 指令：{{ }} v-text=''  v-html='变量' -->
                      <span class="fr money" v-html="item.data.price"></span>
                      <span class="f14">{{ item.data.start_pos }}</span>
                    </template>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 穷游商城 ----------------------------------------->
    <HomeShop :shopList="shopList" @getMoreShop="getMoreShop"></HomeShop>
     <!-- 热门游记与话题------------------------------------>
    <HomeTravel></HomeTravel>
      <!-- 返回顶部组件 element-ui -->
    <el-backtop ></el-backtop>
  </div>
</template>

<script>
import Banner from "./banner/banner.vue";
import Swiperbanner from "./banner/Swiperbanner.vue";
import HomeShop from "./shop/HomeShop.vue";
import HomeTravel from './travel/HomeTravel.vue'
export default {
  name: "HomeView",
  data() {
    return {
      input: "",
      isShow: false, //是否显示热门城市
      isShowList: false, //是否显示搜索框
      hotcity: [], //热门城市名称
      searchList: [], //搜索列表容器
      todyInfo: [], //今日推荐
      shopList: [], //商城数据
      page:0,//换一换的页码
    };
  },
  watch: {
    //监听input
    input(val, old) {
      // console.log('监听input ----',val,old);
      if (!val) {
        this.isShow = true;
        this.isShowList = false;
        return "";
      }
      //输入值：热门城市--隐藏 搜索列表展示
      this.isShow = false;
      this.isShowList = true;
      //网络请求--------------------
      this.$api
        .getSearch({
          keyword: val,
        })
        .then((res) => {
          console.log("搜索列表---网络请求----", res.data);
          this.searchList = res.data.data.list;
        });
    },
  },
  methods: {
    // 聚焦事件
    getinput() {
      if (this.input) {
        this.isShowList = true;
        return;
      }
      this.isShow = true;
      this.isShowList = false;
    },
    // 失去聚焦事件
    laveInpit() {
      this.isShow = false;
    },
    //获取当前热门城市---------------------------------------
    async getHotCity() {
      let res = await this.$api.gethHotCity();
      console.log("获取当前热门城市-------", res.data.result.hotcity);
      this.hotcity = res.data.result.hotcity;
    },
    //获取今日推荐--------------------------------------
    async getTodyInfo() {
      let res = await this.$api.getTodyInfo();
      console.log("获取今日推荐----------", res.data.data);
      this.todyInfo = res.data.data;
    },
    //获取商城----------------------------------------
    async getHomeShop(page) {
      let res = await this.$api.getHomeShop(page); //{page:xx}
      console.log("获取商城---", res.data);
      //数据有尽头---和给你接口的后端人员沟通  什么字段标识作为结束
      this.shopList = res.data.data;
    },
    //获取更多商城接口
    getMoreShop() {
      this.page++;
      console.log("获取更多商城接口", this.page);
      this.getHomeShop({
        page: this.page,
      });
    },
  },
  created() {
    //1. 获取当前的热门城市-------------------
    this.getHotCity();
    //2. 获取今日推荐----------
    this.getTodyInfo();  
    //3. 获取商城接口 
    this.getHomeShop({
      page:this.page
    });
  },
  components: {
    Banner,
    Swiperbanner,
    HomeShop,
    HomeTravel
  },
};
</script>
<style lang="less" scoped>
.banner {
  position: relative;
  .search {
    width: 100%;
    position: absolute;
    top: 50%;
    z-index: 99;
    .bg {
      background: rgba(255, 255, 255, 0.7);
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      padding-top: 300px;
    }
    .list {
      width: 100%;
      height: 240px;
      background: #ffffff;
      border-radius: 10px;
      margin-top: 5px;
      box-sizing: border-box;
      padding: 20px;
      .info {
        font-size: 12px;
        color: #999;
      }
      .title {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
      }
      .hot_citys {
        a {
          display: inline-block;
          margin: 20px 30px 10px 0;
          font-size: 14px;
          color: #666;
          text-decoration: none;
        }
      }
    }
    .search_list {
      width: 100%;
      height: 240px;
      background: #ffffff;
      border-radius: 10px;
      margin-top: 5px;
      box-sizing: border-box;
      padding: 20px;
      li {
        padding: 12px;
        font-size: 14px;
        .subname {
          color: #999;
        }
      }
    }
    .input_bg {
      background-image: linear-gradient(
        90deg,
        rgba(40, 213, 164, 0.8),
        rgba(38, 208, 181, 0.8)
      );
      display: flex;
      align-items: center;
      padding: 10px;
      border-radius: 10px;
    }
  }
}
// 居中容器----------------------------------
.section {
  position: relative;
  padding: 10px 0;
  min-width: 1160px;
  .wrapper {
    margin: 0 auto;
    width: 1160px;
    position: relative;
  }
}
// 两个图片----------------------------------
.section.section-gray {
  border-color: #ececec;
  border-style: solid;
  border-width: 1px 0;
  background-color: #f5f5f5;

  ul {
    overflow: hidden;
    margin-right: -20px;
    // height: 110px;
  }

  ul li {
    float: left;
    margin-right: 20px;
    height: 110px;
    border-radius: 3px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
  }
}
.title-th {
  margin: 10px;
  height: 74px;
  color: #636363;
  text-align: center;
  font: 36px/74px Hiragino Sans GB, Microsoft YaHei, SimHei, SimSun, sans-serif;
  .notice {
    background: #02db94;
    border-radius: 20px;
    width: 180px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: block;
    position: absolute;
    left: 0;
    top: 17px;
    span:before {
      content: "";
      display: inline-block;
      background: url(https://fes.qyerstatic.com/FoHcIRgBY9BWd6lSLxr6NVArmEaL);
      background-size: 16px 16px;
      vertical-align: -2px;
      height: 16px;
      width: 16px;
      margin-right: 8px;
    }

    span:after {
      content: "";
      display: inline-block;
      background: url(https://fes.qyerstatic.com/FkvmdDl4snzkbZzyQCrfMQMBeicW);
      background-size: 7px 11px;
      width: 7px;
      height: 11px;
      margin-left: 8px;
    }
  }
}
.content {
  .item {
    width: 275px;
    height: 300px;
    margin-bottom: 20px;
  }

  .info {
    padding: 0 18px;
    border: 1px solid #ececec;
    border-top: 0;
    height: 114px;
    line-height: 24px;
    overflow: hidden;

    .subtitle {
      margin-top: 14px;
      height: 48px;
      font-size: 16px;
      overflow: hidden;
    }

    .bottom {
      margin-top: 16px;
      height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #636363;
      font-size: 12px;
      font-weight: 700;
      .fr {
        color: #959595;
        float: right;
      }
      .money {
        /deep/ em {
          font-size: 18px;
          color: #ff7466 !important;
        }
      }
      .f14 {
        display: inline-block;
        max-width: 60%;
        min-width: 50%;
        color: #636363;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}
</style>
